﻿@using HouseHoldBudget.App_GlobalResources
@using HouseHoldBudget.Models.Expenses
@using Kendo.Mvc.UI
@model ExpensesListModel
@{
    ViewBag.Title = @CustomResources.ManageMyExpenses_Title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
    <div id="topContent">
        <div class="section-header">
            <div class="title">
                <img src="@Url.Content("~/Content/images/expenses.png")" alt="" />
                @CustomResources.Expenses_MyExpensesTitle
            </div>
        </div>

        <table width="100%">
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.StartDateFilter):
                </td>
                <td class="adminData">
                    @Html.Kendo().DatePicker().Name("StartDatePicker").Value(Model.StartDateFilter).Culture("fr-FR").Format("dd/MM/yyyy")
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.LabelFor(model => model.EndDateFilter):
                </td>
                <td class="adminData">
                    @Html.Kendo().DatePicker().Name("EndDatePicker").Value(Model.EndDateFilter).Culture("fr-FR").Format("dd/MM/yyyy")
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="submit" id="search-expenses" name="search-expenses" value="search-expenses"
                        class="k-button">
                        Rechercher</button>
                </td>
            </tr>
        </table>
        <p>
        </p>
    </div>
    <table class="content">
        <tr>
            <td>
                @(Html.Kendo().Grid<ExpenseModel>()
                    .Name("expenses-grid")
                    //.HtmlAttributes(new { style = "height:100%;" })
                    .Columns(columns =>
                                {
                                    columns.Command(commands =>
                                                        {
                                                            commands.Edit();
                                                            commands.Destroy();
                                                        }).Width(250);
                                    columns.Bound(x => x.ExpenseOn).Format("{0:d}").Width(150)
                                        .Title(@CustomResources.Common_Date);
                                    columns.Bound(x => x.ExpenseType).ClientTemplate("#=ExpenseType.ExpenseTypeName#")
                                        .Title(@CustomResources.Common_ExpensesTypes);
                                    columns.Bound(x => x.ExpenseLabel)
                                        .Title(@CustomResources.Common_Label);
                                    columns.Bound(x => x.ExpenseAmount)
                                        .Title(@CustomResources.Common_Amount)
                                        .Format("{0:C}")
                                        .ClientFooterTemplate("Total: #= kendo.toString(sum, 'C') #")
                                        .ClientGroupFooterTemplate("Total: #= kendo.toString(sum, 'C') #");
                                })

                    .ToolBar(toolbar => toolbar.Create().Text(@CustomResources.ShowMyExpenses_AddExpense))
                    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
                    .DataSource(dataBinding => dataBinding.Ajax()
                                        
                                        .Model(model =>
                                                   {
                                                       model.Id(p => p.Id);
                                                       model.Field(p => p.ExpenseOn);
                                                       model.Field(p => p.ExpenseType).DefaultValue(ViewData["defaultexpensesTypes"] as ExpenseTypesModel);
                                                       model.Field(p => p.ExpenseLabel);
                                                       model.Field(p => p.ExpenseAmount);
                                                   })
                                                   
                                        .Read(read => read.Action("GetExpensesList", "Expenses").Data("additionalData"))
                                        .Create(create => create.Action("InsertExpense", "Expenses").Data("convert"))
                                        .Update(update => update.Action("UpdateExpense", "Expenses", new { startDate = Model.StartDateFilter, endDate = Model.EndDateFilter }).Data("convert"))
                                        .Destroy(destroy => destroy.Action("DeleteExpense", "Expenses"))
                                        .Aggregates(agg => agg.Add(o => o.ExpenseAmount).Sum())
                                        .PageSize(20))
                                        

                    //.Groupable()
                    .Scrollable()
                    .Sortable()
                    .Filterable())
            </td>
        </tr>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {
            //search button
            $('#search-expenses').click(function () {
                var grid = $('#expenses-grid').data('kendoGrid');
                grid.dataSource.read();
                return false;
            });
            resizeGrid();
        });
        $(window).resize(function () {
            resizeGrid();
        });
        function additionalData() {
            return {
                StartDateFilter: kendo.toString($('#StartDatePicker').data('kendoDatePicker').value(), "dd/MM/yyyy"),
                EndDateFIlter: kendo.toString($('#EndDatePicker').data('kendoDatePicker').value(), "dd/MM/yyyy")
            };
        }
        kendo.culture("fr-FR");
        function convert(data) {
            for (var property in data) {
                var value = data[property];
                if (typeof value === "number") {
                    if (value % 1 == 0) {
                        data[property] = value.toString();
                    }
                    else {
                        data[property] = kendo.toString(value, "n");
                    }
                }
            }
        }
        function resizeGrid() {
            var gridElement = $("#expenses-grid");
            var dataArea = gridElement.find(".k-grid-content");
            var topContentHeight = $('#topContent').innerHeight();
            dataArea.height($(document).height() - topContentHeight - 280);
        }
    </script>
}
